define('common:widget/ui/ai/toolButton/toolButton', function(require, exports, module) {

  var san = require('common:widget/ui/ai/san');
  
  return san.defineComponent({
      template: '<div class="tool-btn  {{active ? \'tool-active\' : \'\'}}" '
          +           'style="{{style}}"'
          +           'on-click="handleClick"'
          +           'on-mousedown="handleMouseDown"'
          +           'on-mouseup="handleMouseUp"'
          +           'on-mouseleave="handleMouseLeave"'
          +     '>'
          +         '<div class="tool-btn-content">'
          +             '<div class="tool-icon-view">'
          +                 '<div class="tool-icon-container">'
          +                     '<img class="tool-icon" src="{{icon}}"/>'
          +                     '<img class="tool-icon" src="{{activeIcon}}"/>'
          +                 '</div>'
          +             '</div>'
          +             '<span class="tool-text">{{text}}</span>'
          +         '</div>'
          +     '</div>',
      initData() {
          return {
              active: false,
              activeIcon: '',
              icon: '',
              text: '',
              style: '',
          };
      },
      computed: {
          btnIcon: function () {
              return this.data.get('active') ? this.data.get('activeIcon') : this.data.get('icon');
          },
      },
  
      handleClick: function () {
          this.fire('click');
      },
      handleMouseDown: function () {
          this.data.set('active', true);
      },
      handleMouseUp: function () {
          this.data.set('active', false);
      },
      handleMouseLeave: function () {
          this.data.set('active', false);
      }
  });

});
